import React from 'react';
import { Menu } from 'antd';
import './index.less';
// 引入侧边栏配置
import MenuConfig from '../../config/menuConfig';
import { NavLink } from 'react-router-dom';

const logo = require('../../assets/logo-ant.svg')
const { SubMenu } = Menu;

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            defaultSelect: "",
            defaultOpenKeys: ""
        };
    }

    // 刷新挂载组件
    componentDidMount(){
        let href = window.location.href.split('#')[1]
        let res = href.split('/')

        console.log(href, res);
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode,
            defaultSelect: window.location.href.split('#')[1],
            defaultOpenKeys: res[2]
        })
    }

    // 菜单渲染
    renderMenu = (data) => {
        return data.map((item)=>{
            if(item.children){
                return(
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
                        {item.title}
                        <NavLink to={item.key}></NavLink>
                   </Menu.Item>
        })
    }

    render() {
        const { defaultSelect, defaultOpenKeys } = this.state
        return (
            <>
                {
                    defaultSelect &&
                    <div className="navleft">
                        <div className="logo">
                            <img src={ logo } alt=""/>
                        </div>

                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={[defaultSelect]}
                            defaultOpenKeys={[defaultOpenKeys]}
                        >
                            {this.state.menuTreeNode}
                        </Menu>
                    </div>
                }
            </>
        );
    }
}

export default index;